import React, { useEffect, useState } from 'react'
import axios from '../../api/api'
import { Space, Table, Tag, Button } from 'antd';
import { Checkbox, Form, Input } from 'antd';
import { Modal } from 'antd';
import {  Drawer } from 'antd';

import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
    ZoomInOutlined
} from '@ant-design/icons';
function Index() {
    const [data, setData] = useState()
    const [keyWord, setKeyWord] = useState('')

    const getDatalist = async () => {
        const res = await axios.get('/api/article/list', {
            params: {
                keyWord:keyWord
            }
        })
        console.log(res.data)
        setData(res.data.rows)
    }
    useEffect(() => {
        getDatalist()
    }, [keyWord])
    // 删除文章,需要做二次确认
    const del = (id) => {
        if (window.confirm('您确定要删除吗?')) {
            const sc = data.filter((v) => v.id != id)
            setData(sc)
        }

    }
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const onSelectChange = newSelectedRowKeys => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    const alldel = () => {

        setSelectedRowKeys && setSelectedRowKeys((item) => {

            if (window.confirm('您确定要删除吗?')) {

                setData(item.sc)
            }
        })
    }
    //   搜索
    const [form] = Form.useForm()
    const onFinish = values => {
        console.log('Success:', values);
        setKeyWord(values.keyWord)
    };
    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };

    //    新增
    const [title, setTitle] = useState()
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const Finish = values => {
        console.log('Success:', values);
    };
    const FinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };

    const addfb = () => {
        setIsModalOpen(true);
        setTitle('发布订阅')
    }
    // 详情
    const [xqym,setXqym]=useState()
    const [xqym1,setXqym1]=useState()
    const [open, setOpen] = useState(false);
    const showDrawer = () => {
      setOpen(true);
    };
    const onClose = () => {
      setOpen(false);
    };
    const xq=async(id)=>{
        setOpen(true);
        const res=await axios.get(`/api/article/${id}`,{
            params:{
                id:id
            }
        }
          
        )
        console.log(res.data)
        setXqym(res.data.content)
        setXqym1(res.data.title)
    }
    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            render: text => <a>{text}</a>,
        },
        {
            title: '文章标题',
            dataIndex: 'content',
            key: 'content',
        },
        {
            title: '页面',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '创建时间',
            dataIndex: 'updatedAt',
            key: 'updatedAt',
        },

        {
            title: 'Action',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button onClick={()=>xq(record.id)}>详情</Button>
                    <Button onClick={() => del(record.id)}>删除</Button>
                </Space>
            ),
        },
    ];
    return (
        <div>

            <Button onClick={() => alldel()}>批量删除</Button>
            <Button onClick={() => addfb()}>发布</Button>
            <Drawer
        title="Basic Drawer"
        closable={{ 'aria-label': 'Close Button' }}
        onClose={onClose}
        open={open}
      >
        <p>{xqym}</p>
        <p>{xqym1}</p>
        <p>Some contents...</p>
      </Drawer>
            <Modal

                title={title}
                closable={{ 'aria-label': 'Custom Close Button' }}
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
            >
                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 1200 }}
                    initialValues={{ remember: true }}
                    onFinish={Finish}
                    onFinishFailed={FinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="Username"
                        name="username"

                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="Password"
                        name="password"

                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="文章标题"
                        name="password"

                    >

                       
                    </Form.Item>

                    <Form.Item label={null}>
                        <Button type="primary" htmlType="submit">
                            确定
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
            <Form
                form={form}
                layout='inline'
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 1200 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item

                    name="keyword"

                >
                    <Input />
                </Form.Item>

                <Form.Item label={null}>
                    <Button type="primary" htmlType="submit">
                        <ZoomInOutlined />
                    </Button>
                </Form.Item>
            </Form>
            <Table rowSelection={rowSelection} columns={columns} dataSource={data}
                pagination={{
                    total: data,
                    showSizeChanger: true,
                    showQuickJumper: true,
                    showTotal: total => `Total ${total} items`,
                    defaultPageSize: 3
                }}

            />
        </div>
    )
}

export default Index
